<template>
  <!--提交需预约订单页面-->
  <div class="tijiao">
    <wv-panel class="header">
      <wv-media-box :thumb="goods.coverImg | imgPathFilter" :title="goods.goodsName"
                    :description="goods.agentPrice+'元'"></wv-media-box>
      <span class="num">×{{peerstaffData.length + 1}}</span>
    </wv-panel>
    <div class="divider"></div>
    <wv-group>
      <wv-cell title="总计" :value="totalPrice+'元'" class="total"/>
    </wv-group>
    <div class="divider"></div>
    <p class="e96674">请核实以下信息并支付</p>
    <wv-group class="mymsg">
      <wv-cell title="航班号" :value="appointment.flightNumber"></wv-cell>
      <wv-cell title="航班日期" :value="appointment.flightDate"></wv-cell>
      <wv-cell title="起飞时间" :value="appointment.takeOffTime"></wv-cell>
      <wv-cell title="始发地" :value="appointment.originatingPlace"></wv-cell>
      <wv-cell title="到达地" :value="appointment.destinationPlace"></wv-cell>
      <wv-cell title="姓名" :value="appointment.userName"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==1" value="身份证"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==2" value="护照"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==3" value="港澳通行证"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==4" value="台胞证"></wv-cell>
      <wv-cell title="证件号" :value="appointment.identityNo"></wv-cell>
      <wv-cell title="电话" :value="appointment.phone"></wv-cell>
    </wv-group>
    <!--如果从积分商城过来时此处隐藏-->
    <div class="other">
      <div v-for="(item,index) in peerstaffData" v-if="index==0">
        <p>同行人员{{index + 1}}</p>
        <wv-group class="mymsg">
          <wv-cell title="姓名" :value="item.userName"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==2" value="护照"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳通行证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==4" value="台胞证"></wv-cell>
          <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
        </wv-group>
      </div>
      <div class="content" v-for="(item,index) in peerstaffData" v-if="index>0 && isVisible">
        <p>同行人员{{index + 1}}</p>
        <wv-group class="mymsg">
          <wv-cell title="姓名" :value="item.userName"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==2" value="护照"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳通行证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==4" value="台胞证"></wv-cell>
          <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
        </wv-group>
      </div>
      <p class="shouqi last" v-show="!isVisible" @click="isVisible=true"><img src="../../assets/xiala.png" alt=""> 展开更多
      </p>
      <p class="shouqi last" v-show="isVisible" @click="isVisible=false"><img src="../../assets/shouqi.png" alt=""> 收起更多
      </p>
    </div>
    <offer @confirm="offer" :goodsList="goodsList" :buySource="1" :resultPrice="totalPrice" :appointment="appointment"
           :peerstaffData="peerstaffData"></offer>
  </div>
</template>
<
<script type="text/ecmascript-6">
  import offer from '../offertemplate/offertemplate'
  import {getAgentGoodDetail} from '../../utils/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'tijiaodingdan',
    props: {},
    data() {
      return {
        isVisible: false,
        goodsList: [],
        appointment: {},
        peerstaffData: [],
        goods: {},
        isOld: false
      };
    },
    methods: {
      offer() {
        this.$router.push({path: '/yuyuesuccess'})
      },
      getGoodDetail(params) {
        getAgentGoodDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.goods = res.object.goods;
            let categoryCode = res.object.categoryCode;
            if (categoryCode == 'viproom') {
              this.goods['orderType'] = 2;
            }
            if (categoryCode == 'viponly') {
              this.goods['orderType'] = 3;
            }
            this.goods['goodsNum'] = this.peerstaffData.length + 1;
            this.goods['unitPrice'] = this.goods.agentPrice;
            this.goodsList.push(this.goods);
          }
        })
      }
    },
    created() {
      this.appointment = JSON.parse(this.$route.query.appointmentInfo);
      this.peerstaffData = JSON.parse(this.$route.query.peerstaffInfo);
      console.log(this.appointment);
      let params = {goodsId: this.appointment.targetId};
      this.getGoodDetail(params);

    },
    computed: {
      totalPrice: function () {
        console.log(this.peerstaffData);
        let goodsPrice = this.goods.agentPrice;
        return goodsPrice * (this.peerstaffData.length + 1);
      }
    },
    components: {
      offer
    }
  }
</script>


!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

  .divider {
    height: 10px;
    background-color: #eee;
  }

  .header {
    position: relative;

    .num {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 15px;
      color: #666;
    }
  }

  .e96674 {
    color: #e96674;
    padding-top: 10px;
  }

  .other {
    padding-top: 20px;

    p {
      color: #111;
    }

    .content p {
      padding-top: 20px;
    }
  }

  .shouqi {
    margin-top: 10px;
  }

  .tijiao {
    margin-bottom: 60px;
  }
</style>
